import React from"react";
import {TabBar} from "antd-mobile";
class   App extends React.Component{
constructor(props) {
    super(props);
    this.state ={
        activeKey:this.getActiveKey()
    }
}
    getActiveKey(){
        if(window.location.pathname === "/first"){
            return"";
        }else if(window.location.pathname === "/category")
        {
            return "category";
        }else if(window.location.pathname === "/shopping")
        {
            return "shopping";
        }else{ return "mine"}
    }

    render(){
        return(
            <div className="bottomApp">
                <TabBar activeKey={this.state.activeKey} onChange={
                    key =>{
                        console.log(key);
                        this.props.history.replace("/"+key)
                    }
                }>
                    <TabBar.Item key={"first"} title={"首页"}
                    icon={<img src={require("../../asset/img/banner/home.png").default}/>}/>
                    <TabBar.Item key={"category"} title={"分类"}
                                 icon={<img src={require("../../asset/img/banner/category.png").default}/>}/>
                    <TabBar.Item key={"shoppingCar"} title={"购物车"}
                                 icon={<img src={require("../../asset/img/banner/shopping.png").default}/>}/>
                    <TabBar.Item key={"mine"} title={"我的"}
                                 icon={<img src={require("../../asset/img/banner/mine.png").default}/>}/>
                </TabBar>
            </div>
        )
    }
}
export default App;